<template>
    <div class="staff">
        <c-title :text="text"></c-title>
        <div class="form">
            <van-cell-group>
                <van-field v-if="$route.params.merchant_id" @input="input_handle" v-model="member_id" label="更换员工"
                    placeholder="请输入员工id" :error-message="message" @click="sumbit" />

                <van-field v-if="$route.params.member_id" label="原先员工" :error-message="member_message" readonly>
                    <template #input>
                        <div style="color:#AAAAB3;">{{ $route.params.member_id }}</div>
                    </template>
                </van-field>
                <van-field v-else v-model="member_id" @input="input_handle" label="员工" placeholder="请输入员工id"
                    :error-message="message" @click="sumbit">
                </van-field>
                <van-field v-model="realname" label="姓名" placeholder="请输入真实姓名" />
                <van-field v-model="mobile" label="手机号码" placeholder="请输入手机号码" />
            </van-cell-group>
        </div>
        <div class="footer">
            <div v-if="!$route.params.merchant_id">还可以添加<span class="main-color">{{
                $route.params.left_employee_count }}个</span>员工</div>
            <div class="btn" @click=submit>确定</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            mobile: "",
            member_message:"",
            message: "",
            realname: "",
            text: '',
            member_id: "",
            timer: null,
            member_info: {}
        };
    },
    activated() {
        if (this.$route.params.merchant_id) {
            this.get_merchant();
        }
        this.text=this.$route.params.member_id?'更换招商员':'添加员工';
        this.fun.setWXTitle(this.text);
    },

    methods: {
        sumbit() {
            if (this.message) {
                this.realname = this.member_info.realname;
                this.mobile = this.member_info.mobile;
            }
        },
        input_handle() {
            if (this.timer) {
                clearTimeout(this.timer)
            };
            this.timer = setTimeout(() => {
                this.get_member()
            }, 400);
        },
        get_merchant(){
            $http.post("plugin.zhixianggou.api.agent.member-info", { member_id: this.$route.params.member_id }, '.').then(res => {
                if (res.result && res.data) {
                    this.member_message = res.data.nickname;
                }
            })
        },
        get_member() {
            $http.post("plugin.zhixianggou.api.agent.member-info", { member_id: this.member_id }, '.').then(res => {
                if (res.result && res.data) {
                    this.member_info = res.data;
                    this.message = res.data.nickname;
                }
            })
        },
        submit() {
            let json = { member_id: this.member_id * 1, agent_id: this.$route.params.agent_id * 1, realname: this.realname, mobile: this.mobile }
            console.log(this.$route);
            if (this.$route.params.merchant_id) {
                json.merchant_id = this.$route.params.merchant_id;
            }
            $http.post('plugin.zhixianggou.api.agent.merchant-store', json, '.').then(res => {
   
                if (res.result) {
                    if(this.$route.params.merchant_id){
                        this.$toast('修改成功')
                    }else{
                        this.$toast('添加成功')
                    }
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 800);
                }else{
                    this.$toast(res.msg);
                }
            })
        },
    }
};
</script>

<style scoped lang='scss'>
.staff {
    position: relative;
    min-height: 100vh;

    .form {
        margin: .625rem .75rem;
        border-radius: .5rem;
        overflow: hidden;
    }

    .main-color {
        color:  var(--themeBaseColor);
    }

    .btn {
        margin: .625rem .75rem;
        border-radius: 1.2813rem;
        padding: .75rem 0;
        text-align: center;
        background-color: var(--themeBaseColor);
        color: #fff;
        font-weight: 500;
        line-height: 1;
        font-size: .9375rem;
        box-sizing: border-box;
        cursor: pointer;
    }

    .footer {
        background-color: #fff;
        position: absolute;
        left: 0;
        padding-top: 1.0313rem;
        right: 0;
        bottom: 0;
    }
}
</style>